<template>
  <div class="mainContent">
    <div class="form">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="60px" class="demo-ruleForm">
        <div style="margin:0 0 20px 0;">
          <span style="font-size:25px;font-weight:600;">
            格致欢迎您
          </span>
        </div>
        <el-form-item label="账号" prop="name">
          <el-input placeholder="请输入手机号" v-model="ruleForm.name" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input placeholder="请输入密码" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-button :disabled="isdisabled" class="loginbtn" type="primary" plain @click="submitForm">登录
        </el-button>
        <div style="margin:15px 0 0 0;">
          <el-button type="text" @click="find">找回密码</el-button>
          <el-button type="text" @click="newuser">免费注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      ruleForm: {
        name: '',
        pass: ''
      }
    }
  },
  methods: {
    setCookie (name, value) {
      var Days = 1
      var exp = new Date()
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
      document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
    },
    newuser () {
      this.$router.push('/NewUser')
    },
    find () {
      this.$router.push('/Forget')
    },
    success (text) {
      this.$notify({
        title: '成功',
        message: text,
        type: 'success'
      })
    },
    failed (text) {
      this.$notify.error({
        title: '出错了',
        message: text
      })
    },
    submitForm () {
      if (this.ruleForm.name && this.ruleForm.pass) {
        this.$axios({
          method: 'post',
          url: '/api/v1/login',
          data: {
            id: '0',
            name: this.ruleForm.name,
            nickname: '',
            password: this.ruleForm.pass
          }
        }).then((res) => {
          console.log(res)
          if (res.data.code === 0) {
            this.setCookie('token', res.data.data.token)
            this.setCookie('username', res.data.data.userDetail.username)
            this.setCookie('id', res.data.data.userDetail.id)
            this.setCookie('nickname', res.data.data.userDetail.nickname)
            this.setCookie('role', res.data.data.userDetail.role.name)
            this.success('成功登陆')
            this.$router.push('/')
            location.reload()
          } else {
            this.failed(res.data.message)
          }
        })
      }
    }
  },
  computed: {
    isdisabled () {
      if (this.ruleForm.name && this.ruleForm.pass) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
.mainContent {
  height: 850px;
  width: 100%;
  text-align: center;
  background: url("../../../static/person1.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.form {
  margin: 200px auto;
  width: 500px;
  background: white;
  padding: 30px 50px;
  border-radius: 10px;
}
.loginbtn {
  width: 350px;
  font-size: 20px;
  color: black;
}
</style>
